<template>
  <div>
    <el-tabs type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="一楼包厢">
        <div v-if="tableData.length > 0">
          <el-col :span="3" v-for="table in tableData" :key="table.tableId" class="table-col">
            <el-card :shadow="table.tableCondition === '1' ? 'always' : 'hover'" class="card-container">
              <div class="delete-button" @click="handleDelete(table.tableId)">
                <i class="el-icon-delete"></i> <!-- Built-in delete icon -->
              </div>
              <div class="table-number">{{ table.tableId }}</div>
              <!-- Status -->
              <p class="center-text">{{ table.tableCondition === '1' ? '空闲' : '使用中' }}</p>
              <!-- Number of People in parentheses and smaller font in the center -->
              <p class="small-text">(餐桌人数: {{ table.peopleNumber }})</p>
              <el-button type="text" class="button"
                @click="table.tableCondition === '1' ? openOrderDialog(table) : viewOrder(table.tableId)">
                {{ table.tableCondition === '1' ? '订餐' : '查看' }}
              </el-button>
            </el-card>
          </el-col>
        </div>
        <div v-else>
          <div class="no-content-message">
            <p>No content available.</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="二楼包厢">
        <div v-if="tableData.length > 0">
          <el-col :span="3" v-for="table in tableData" :key="table.tableId" class="table-col">
            <el-card :shadow="table.tableCondition === '1' ? 'always' : 'hover'" class="card-container">
              <div class="delete-button" @click="handleDelete(table.tableId)">
                <i class="el-icon-delete"></i> <!-- Built-in delete icon -->
              </div>
              <div class="table-number">{{ table.tableId }}</div>
              <!-- Status -->
              <p class="center-text">{{ table.tableCondition === '1' ? '空闲' : '使用中' }}</p>
              <!-- Number of People in parentheses and smaller font in the center -->
              <p class="small-text">(餐桌人数: {{ table.peopleNumber }})</p>
              <el-button type="text" class="button"
                @click="table.tableCondition === '1' ? openOrderDialog(table) : viewOrder(table.tableId)">
                {{ table.tableCondition === '1' ? '订餐' : '查看' }}
              </el-button>
            </el-card>
          </el-col>
        </div>
        <div v-else>
          <div class="no-content-message">
            <p>No content available.</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="三楼包厢">
        <div v-if="tableData.length > 0">
          <el-col :span="3" v-for="table in tableData" :key="table.tableId" class="table-col">
            <el-card :shadow="table.tableCondition === '1' ? 'always' : 'hover'" class="card-container">
              <div class="delete-button" @click="handleDelete(table.tableId)">
                <i class="el-icon-delete"></i> <!-- Built-in delete icon -->
              </div>
              <div class="table-number">{{ table.tableId }}</div>
              <!-- Status -->
              <p class="center-text">{{ table.tableCondition === '1' ? '空闲' : '使用中' }}</p>
              <!-- Number of People in parentheses and smaller font in the center -->
              <p class="small-text">(餐桌人数: {{ table.peopleNumber }})</p>
              <el-button type="text" class="button"
                @click="table.tableCondition === '1' ? openOrderDialog(table) : viewOrder(table.tableId)">
                {{ table.tableCondition === '1' ? '订餐' : '查看' }}
              </el-button>
            </el-card>
          </el-col>
        </div>
        <div v-else>
          <div class="no-content-message">
            <p>No content available.</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="桌台下单" :visible.sync="dialogTableVisible" custom-class="custom-dialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="消费者身份" prop="customerId">
          <div class="input-container">
            <el-radio-group v-model="ruleForm.isMember" class="custom-input">
              <el-radio label="1">会员</el-radio>
              <el-radio label="0">非会员</el-radio>
            </el-radio-group>

            <el-input v-if="ruleForm.isMember === '1'" v-model="ruleForm.customerId" class="custom-input"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="用餐最多人数" prop="number" label-width="115px">
          <div class="input-container">
            <!-- <el-input v-model="ruleForm.number" class="custom-input"></el-input> -->
            <div class="max-people-hint">(最多 {{ table.peopleNumber }} 人用餐)</div>
          </div>
        </el-form-item>
        <el-form-item label="用餐方式" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择就餐方式" class="custom-input">
            <el-option label="堂食" value="tangshi"></el-option>
            <el-option label="外带" value="waidai"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialogmain-container">
        <div class="sidebar">
          <el-tabs :tab-position="tabPosition" style="height: 600px;">
            <!-- <el-tab-pane label="优惠套餐">
              <el-row>
                <el-col :span="5" v-for="foodItem in getCategoryItemsByName('优惠套餐')" :key="foodItem.menuId"
                  class="table-col2">
                  <el-card shadow="hover" class="card-container">
                    <img :src="foodItem.menuImage" class="food-image">
                    <div class="food-details">
                      <h3 class="food-name">{{ foodItem.menuName }}</h3>
                      <p class="food-price">{{ foodItem.menuPrice }} 元</p>
                    </div>
                    <el-button type="primary" icon="el-icon-shopping-cart" class="add-to-cart-button"
                      @click="addToCart(foodItem)"></el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>

            <el-tab-pane label="荤菜">
              <el-row>
                <el-col :span="5" v-for="foodItem in getCategoryItemsByName('荤菜')" :key="foodItem.menuId"
                  class="table-col2">
                  <el-card shadow="hover" class="card-container">
                    <img :src="foodItem.menuImage" class="food-image">
                    <div class="food-details">
                      <h3 class="food-name">{{ foodItem.menuName }}</h3>
                      <p class="food-price">{{ foodItem.menuPrice }} 元</p>
                    </div>
                    <el-button type="primary" icon="el-icon-shopping-cart" class="add-to-cart-button"
                      @click="addToCart(foodItem)"></el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="素菜"> <el-row>
                <el-col :span="5" v-for="foodItem in getCategoryItemsByName('素菜')" :key="foodItem.menuId"
                  class="table-col2">
                  <el-card shadow="hover" class="card-container">
                    <img :src="foodItem.menuImage" class="food-image">
                    <div class="food-details">
                      <h3 class="food-name">{{ foodItem.menuName }}</h3>
                      <p class="food-price">{{ foodItem.menuPrice }} 元</p>
                    </div>
                    <el-button type="primary" icon="el-icon-shopping-cart" class="add-to-cart-button"
                      @click="addToCart(foodItem)"></el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane> -->
            <!-- <el-tab-pane label="主食">主食</el-tab-pane> -->
            <el-tab-pane v-for="category in categories" :key="category.id" :label="category.name">
              <el-row>
                <el-col :span="5" v-for="foodItem in getCategoryItemsByName(category.name)" :key="foodItem.menuId"
                  class="table-col2">
                  <el-card shadow="hover" class="card-container">
                    <img :src="foodItem.menuImage" class="food-image">
                    <div class="food-details">
                      <h3 class="food-name">{{ foodItem.menuName }}</h3>
                      <p class="food-price">{{ foodItem.menuPrice }} 元</p>
                    </div>
                    <el-button type="primary" icon="el-icon-shopping-cart" class="add-to-cart-button"
                      @click="addToCart(foodItem)"></el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="order-list">
          订单列表
          <el-table :data="products">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="menuName" label="商品名称"></el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <div class="quantity-control">
                  <el-button type="text" @click="decrement(scope.$index)">-</el-button>
                  <div class="quantity-display">{{ quantities[scope.$index] }}</div>
                  <el-button type="text" @click="increment(scope.$index)">+</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="menuPrice" label="单价"></el-table-column>
            <el-table-column label="商品总价">
              <template slot-scope="scope">
                {{ quantities[scope.$index] * scope.row.menuPrice }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="removeItem(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="total-row">
            <div class="total-cost">
              合计：<span class="red-text">{{ calculateTotalCost() }}</span> 元
            </div>
            <el-button v-if="hasItemsInCart" type="primary"
              @click="placeOrder(ruleForm.customerId, ruleForm.number, ruleForm.region, table.tableId)">
              立即下单
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="桌台详情" :visible.sync="dialogFormVisible" custom-class="custom-dialog">
      <el-table :data="productscheck">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="menuName" label="商品名称"></el-table-column>
        <el-table-column prop="menuNumber" label="数量"></el-table-column>
        <el-table-column prop="menuPrice" label="单价"></el-table-column>
        <el-table-column label="商品总价">
          <template slot-scope="scope">
            {{ scope.row.menuNumber * scope.row.menuPrice }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="decrementMenuNumber(scope)">减菜</el-button>
            <el-button type="text" @click="incrementMenuNumber(scope)">加菜</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="total-row">
        <div class="total-cost">
          合计：<span class="red-text">{{ calculateTotalCost2() }}</span> 元
        </div>
        <el-button type="primary" @click="Addvegetables(productscheck[0].orderId)">
          加菜
        </el-button>
        <el-button type="primary"
          @click="placeBilling(productscheck[0].orderId, calculateTotalCost2(), productscheck[0].tableId)">
          立即结算
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="桌台详情" :visible.sync="dialogMenuVisible" custom-class="custom-dialog">
      <div class="dialogmain-container">

        <div class="sidebar">
          <el-tabs :tab-position="tabPosition" style="height: 600px;">
            <el-tab-pane v-for="category in categories" :key="category.id" :label="category.name">
              <el-row>
                <el-col :span="5" v-for="foodItem in getCategoryItemsByName(category.name)" :key="foodItem.menuId"
                  class="table-col2">
                  <el-card shadow="hover" class="card-container">
                    <img :src="foodItem.menuImage" class="food-image">
                    <div class="food-details">
                      <h3 class="food-name">{{ foodItem.menuName }}</h3>
                      <p class="food-price">{{ foodItem.menuPrice }} 元</p>
                    </div>
                    <el-button type="primary" icon="el-icon-shopping-cart" class="add-to-cart-button"
                      @click="addToCart(foodItem)"></el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="order-list">
          订单列表
          <el-table :data="products">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="menuName" label="商品名称"></el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <div class="quantity-control">
                  <el-button type="text" @click="decrement(scope.$index)">-</el-button>
                  <div class="quantity-display">{{ quantities[scope.$index] }}</div>
                  <el-button type="text" @click="increment(scope.$index)">+</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="menuPrice" label="单价"></el-table-column>
            <el-table-column label="商品总价">
              <template slot-scope="scope">
                {{ quantities[scope.$index] * scope.row.menuPrice }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="removeItem(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="total-row">
            <div class="total-cost">
              合计：<span class="red-text">{{ calculateTotalCost() }}</span> 元
            </div>
            <el-button v-if="hasItemsInCart" type="primary" @click="placeMenuOrder()">
              立即下单
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/utils/request";
export default {
  data() {
    return {
      tableData: [],
      foodItems: [],
      MenuOrder: [],
      search: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogMenuVisible: false,
      ruleForm: {
        isMember: '0',
        customerId: '0',
        number: '1',
        region: 'tangshi',
      },
      menuData: {
        code: 200,
        msg: "success",
        data: [
        ],
      },
      customerType: '0',
      isMember: '0',
      orderId: null,
      currentPage: 1,
      products: [],
      quantities: [],
      checkquantities: [],
      menuId: [],
      productscheck: [],
      quantity: '',
      currentDate: new Date(),
      tabPosition: 'left',
      table: [],
      rules: {
        customerId: [
          { required: true, message: '会员默认id为0', trigger: 'blur' },
        ],
        number: [
          { required: true, message: '请输入就餐人数', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择就餐方式', trigger: 'change' }
        ],
        activeName: 'second'
      },
    };
  },
  created() {
    this.fetchDataFromApi(1);
  },
  computed: {
    hasItemsInCart() {
      return this.products.length > 0;
    },
    categories() {
      return this.menuData.data ? this.menuData.data.map(category => ({
        id: category.id,
        name: category.name,
      })) : [];
    },
  },
  methods: {

    handleTabClick(tab, event) {
      // Do something when a tab is clicked
      if (tab.label === "一楼包厢") {
        this.fetchDataFromApi(1)
      } else if (tab.label === "二楼包厢") {
        this.fetchDataFromApi(2)
      } else if (tab.label === "三楼包厢") {
        this.fetchDataFromApi(3)
      }

    },
    getCategoryItemsByName(categoryName) {
      const category = this.menuData.data ? this.menuData.data.find(category => category.name === categoryName) : null;
      console.log(this.menuData.data)
      return category ? (category.products ? category.products : []) : [];
    },
    fetchDataFromApi(currentPage) {
      service
        .get(`http://localhost:9090/Foodtable/page?page=${currentPage}&pageSize=18`)
        .then((res) => {
          this.tableData = res.data.rows;
        })
        .catch((error) => {
          console.error("Error fetching data from API:", error);
        });
    },

    // fetchFoodItemsApi() {
    //   service.get("http://localhost:9090/menu/page")
    //     .then(res => {
    //       this.foodItems = res.data.rows;
    //     })
    //     .catch(error => {
    //       console.error("Error fetching data from API:", error);
    //     });
    // },
    fetchFoodItemsApi() {
      service.get("http://localhost:9090/categories")
        .then(res => {
          this.foodItems = res.data.rows;
          this.menuData = res
          console.log(res.data)
        })
        .catch(error => {
          console.error("Error fetching data from API:", error);
        });
    },
    fetchMenuOrderDataApi(tableId) {
      service.get("http://localhost:9090/order/infoTableId?table_id=" + tableId)
        .then(res => {
          this.fetchOrderMenuDataApi(res.data.orderId)
        })
        .catch(error => {
          console.error("Error fetching data from API:", error);
        });
    },
    fetchOrderMenuDataApi(orderId) {
      service.get("http://localhost:9090/menu_order/info?order_id=" + orderId)
        .then(res => {
          this.productscheck = res.data
        })
        .catch(error => {
          console.error("Error fetching data from API:", error);
        });
    },
    delete(tableId) {
      service.delete("http://localhost:9090/Foodtable/delete?table_id=" + tableId).then(res => {
        if (res) {
          this.$message.success("删除成功")
          this.delVisibleaa = false
          const result = (tableId % 10) + 1;
          this.fetchDataFromApi(result)
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleDelete(tableId) {
      this.$confirm('此操作将永久删除该餐桌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.delete(tableId);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    Addvegetables(orderId) {
      this.dialogMenuVisible = true;
      this.products = [];
      this.quantities = [];
      window.orderId = orderId;
      this.fetchFoodItemsApi();
    },
    viewOrder(tableId) {
      this.dialogFormVisible = true;
      this.fetchMenuOrderDataApi(tableId);
    },
    openOrderDialog(table) {
      this.table = table;
      this.dialogTableVisible = true;
      this.products = [];
      this.quantities = [];
      this.fetchFoodItemsApi();
    },
    closeOrderDialog() {
      this.dialogTableVisible = false;
    },
    incrementMenuNumber(scope) {
      let currentMenuNumber = scope.row.menuNumber;
      currentMenuNumber++;
      scope.row.menuNumber = currentMenuNumber;
      console.log("adsdadad", window.orderId)
      this.menuOrderConditionput(scope.row.orderId, scope.row.menuId, scope.row.menuNumber)
    },
    decrementMenuNumber(scope) {
      let currentMenuNumber = scope.row.menuNumber;
      currentMenuNumber--;
      scope.row.menuNumber = currentMenuNumber;
      this.menuOrderConditionput(scope.row.orderId, scope.row.menuId, scope.row.menuNumber)
    },
    addToCart(foodItem) {
      // Check if an item with the same "menuName" already exists in the "products" list
      const existingIndex = this.products.findIndex((item) => item.menuName === foodItem.menuName);

      if (existingIndex !== -1) {
        // If the item already exists, increment its quantity in both arrays
        this.increment(existingIndex)
      } else {
        // If the item does not exist, add it to both arrays// Initialize quantity to 1
        this.products.push(foodItem);
        this.quantities.push(1);
        this.menuId.push(foodItem.menuId)
      }
    },

    increment(index) {
      this.$set(this.quantities, index, this.quantities[index] + 1);
    },

    decrement(index) {
      if (this.quantities[index] > 1) {
        this.$set(this.quantities, index, this.quantities[index] - 1);
      }
    },
    removeItem(index) {
      this.products.splice(index, 1);
      this.quantities.splice(index, 1);
    },
    calculateTotalCost() {
      let total = 0;
      for (let i = 0; i < this.products.length; i++) {
        total += this.products[i].menuPrice * this.quantities[i];
      }
      return total;
    },
    calculateTotalCost2() {
      let total = 0;
      for (let i = 0; i < this.productscheck.length; i++) {
        total += this.productscheck[i].menuPrice * this.productscheck[i].menuNumber;
      }
      return total;
    },
    placeOrder(customerId, name, region, tableId) {
      const currentTime = new Date();
      let orderTimefinish = null;
      if (region === 'waidai') {
        region = "外卖"
        orderTimefinish = currentTime;
      }
      region = "堂食"
      service.post("http://localhost:9090/order/add", {
        customerId: customerId,
        type: region,
        tableId: tableId,
        orderTimestart: currentTime,
        orderTimefinish: orderTimefinish
      }).then(response => {
        this.orderId = response.data.orderId; // Store the orderId
        this.$message.success("保存成功，Order ID: " + response.data.orderId);
        this.tableCondition(region, tableId);
        for (let i = 0; i < this.products.length; i++) {
          console.log('this.products.length:', this.products.length);
          this.menuOrderConditionpost(response.data.orderId, this.products[i].menuId, this.quantities[i])
        }
      }).catch(error => {
        this.$message.error("保存失败: " + error);
      });
    },
    placeMenuOrder() {
      for (let i = 0; i < this.products.length; i++) {
        console.log('this.products.length:', this.products.length);
        this.menuOrderConditionpost(window.orderId, this.products[i].menuId, this.quantities[i])
      }
    },
    AddMenuOrder() {
    },
    tableCondition(region, tableId) {
      const data = {
        tableId: tableId,
        tableCondition: '0',
      };
      if (region === 'waidai') {
        data.tableCondition = '1';
      }
      const url = 'http://localhost:9090/Foodtable/updata';
      service.put(url, data)
        .then((response) => {
          this.dialogTableVisible = false;
          if (tableId < 20) {
            const result = 1;
            this.fetchDataFromApi(1)
          }
          else if (20 <= tableId < 40) {
            this.fetchDataFromApi(2)
          }
          else if (40 <= tableId < 60) {
            this.fetchDataFromApi(3)
          }
        })
        .catch((error) => {
          console.error('PUT request failed:', error);
        });
    },
    menuOrderConditionpost(orderId, menuId, quantities) {
      service.post("http://localhost:9090/menu_order/add", {
        orderId: orderId,
        menuId: menuId,
        menuNumber: quantities
      }).then(res => {
        if (res) {
          this.$message.success("菜单保存成功")
          this.dialogMenuVisible = false
          this.dialogFormVisible = false
        } else {
          this.$message.error("菜单保存失败")
        }
      }).catch((error) => {
        this.$message.error("菜单保存失败，不能保存已有的菜品")
      });
    },
    menuOrderConditionput(orderId, menuId, quantities) {
      service.put("http://localhost:9090/menu_order/updata", {
        orderId: orderId,
        menuId: menuId,
        menuNumber: quantities
      }).then(res => {
        if (res) {
          this.$message.success("菜单保存成功")
        } else {
          this.$message.error("菜单保存失败")
        }
      })
    },
    tableCond(tableId) {
      const data = {
        tableId: tableId,
        tableCondition: '1',
      };
      const url = 'http://localhost:9090/Foodtable/updata';
      service.put(url, data)
        .then((response) => {
          this.dialogFormVisible = false;
          if (tableId < 20) {
            const result = 1;
            this.fetchDataFromApi(1)
          }
          else if (20 <= tableId < 40) {
            this.fetchDataFromApi(2)
          }
          else if (40 <= tableId < 60) {
            this.fetchDataFromApi(3)
          }
        })
        .catch((error) => {
          console.error('PUT request failed:', error);
        });
    },
    checkmenuOrder() {

    },
    placeBilling(orderId, orderCost, tableId) {
      const currentTime = new Date();
      const data = {
        orderId: orderId,
        orderTimefinish: currentTime,
        orderCost: orderCost,
      };
      const url = 'http://localhost:9090/order/updata';
      service.put(url, data)
        .then((response) => {
          console.log('PUT request successful:', tableId);
          this.tableCond(tableId);
        })
        .catch((error) => {
          console.error('PUT request failed:', error);
        });
    },
  }
};
</script>
<style>
.table-col {
  margin: 20px;
}

.card-container {
  height: 150px;
}

.no-content-message {
  margin-top: 20px;
}

.card-container {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.table-number {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  color: #666;
}


.small-text {
  font-size: 12px;
}

.delete-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}


.input-container {
  display: flex;
  align-items: center;
}

.custom-input {
  width: 150px;
}

.max-people-hint {
  color: #8c8c8c;
  margin-left: 10px;
  font-size: 12px;
}

.dialogmain-container {
  display: flex;
}

.sidebar {
  flex: 4;
  background-color: #f0f0f0;
  padding: 20px;
}

.custom-dialog {
  width: 1500px;
}

.order-list {
  flex: 1;
  background-color: #e0e0e0;
  padding: 20px;
}

.table-col2 {
  margin: 15px;
}

.food-image {
  width: 100px;
  /* Adjust the width as needed */
  height: 100px;
  /* Adjust the height as needed */
  object-fit: cover;
}


.food-details {
  margin-top: 10px;
  padding: 10px;
}

.food-name {
  font-size: 10px;
  position: absolute;
  left: 10px;
  bottom: 15px;
  font-weight: bold;
  color: #0a0a0a;
}


.food-price {
  position: absolute;
  font-size: 10px;
  left: 10px;
  bottom: 0px;
  color: #666;
}

.add-to-cart-button {
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 5px;
}

.custom-card {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quantity-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 5px;
  /* Add margin for spacing */
}

.quantity-control el-button {
  width: 30px;
  /* Adjust the width as needed */
  padding: 0;
  /* Add margin for spacing */
}

.red-text {
  color: red;
}
</style>
